const pages = document.querySelectorAll('main > div'); // 获取所有的内容模块
const contentPage = document.getElementById('content');
const links = document.querySelectorAll('aside a'); // 获取 aside 菜单链接

function showPage() { // 根据哈希值切换内容
  const hash = window.location.hash || '#home';
  pages.forEach(page => page.style.display = 'none');
  let currentPage = document.querySelector(hash); // 显示与当前哈希值匹配的页面
  if (!currentPage) {
    currentPage = contentPage;
    fetch(hash.substring(1) + '.html') // 获取对应的 HTML 文件
      .then(response => {
        if (!response.ok) throw new Error('页面加载失败，状态码：' + response.status);
        return response.text();
      })
      .then(html => {
        contentPage.innerHTML = html;
        const scripts = Array.from(contentPage.querySelectorAll('script'));
        const scriptContent = scripts.map(s => s.textContent).join('\n');
        scripts.forEach(s => s.remove());
        try { // 执行脚本，用立即执行函数表达式(IIFE)封装，以避变量免污染全局
          new Function(scriptContent)();
        } catch (error) {
          console.error('执行内联脚本失败:', error);
        }
        // import(`/static/${hash.substring(1)}.js`)
        //   .then(module => module.init())
        //   .catch(error => console.error('模块加载失败:', error));
      })
      .catch(error => {
        contentPage.innerHTML = `<h1>404: 页面不存在</h1><h1>加载页面时出错: ${error}</h1>`;
      });
  }
  currentPage.style.display = 'block';
  links.forEach(link => { // 切换活动链接的样式
    link.classList.remove('active');
    if (link.getAttribute('href') === hash) {
      link.classList.add('active');
      let parent = link;
      while ((parent = parent.parentElement) && parent.tagName !== 'ASIDE') {
        if (parent.tagName === 'DETAILS') parent.setAttribute('open', '');
      }
    }
  });
}

// showPage(); // 首次加载页面时，执行一次切换
// 页面初始加载时渲染
document.addEventListener('DOMContentLoaded', showPage);
// 监听 URL 哈希值的变化（当点击锚点链接或使用浏览器前进/后退按钮时）
window.addEventListener('hashchange', showPage);

// 将某些功能暴露给外部
// export {showPage};
// 从其他模块导入功能
// import { someFunction } from './other.js';

// (function (win, doc) { //使用 IIFE 封装 (旧方法)
//   'use strict'; // 启用严格模式
//   // 这里的变量和函数都是局部作用域的
//   const myButton = doc.getElementById('my-button');
//   const myMessage = 'Hello from a local variable!';
//   if (myButton) {
//     myButton.addEventListener('click', () => {
//       alert(myMessage);
//     });
//   }
//   // 如果需要，可以暴露一个命名空间到全局
//   win.myApp = {
//     // ...
//   };
// })(window, document);